<template>
	<view>
		<view class="evaluate">
			<view class="evaluate_data">
				<image :src="activity.actImg" mode=""></image>
				<view class="right">
					<p class="evaluate_name">{{activity.actName}}</p>
				</view>
			</view>
			<view class="Rate">
				<p>整体评价</p>
				<view class="star">
					<image :src="item.img" mode="" v-for="(item,index) in stars" :key="index" @click="setStar(item,index)"></image>
				</view>
			</view>
			<view class="pingjia_box">
				<textarea placeholder="说说您的感受..." maxlength="-1" v-model="comment" />
			</view>
		<p class="youhui" style="border-bottom: none;">
			<text class="text1">上传图片</text>
			<text class="text3">(最多9张)</text>
		</p>
		<view class="img_box" >
			<view class="img_list" v-for="(img, index) in imgUrl" :key="index">
				<block>
					<image :src="img" mode="" class="imgs" @click="previewImg(img)"></image>
					<image z-index="9999" src="../../../static/activity/img/close.png" mode="" class="close" @tap="delImg(index)"></image>
				</block>
			</view>
			<view class="addImg" v-if="imgUrl.length < 9"  @tap="chooseImages">
				<image src="../../../static/activity/img/shexiang.png" mode=""></image>
			</view>
		</view>
	</view>
	<view class="btns" :style="{color: colors}" @click="clickPost">提交评价</view>
	</view>
</template>
<script>
var app = getApp();
export default {
	data() {
		return {
			userId: "aiqiu",
			activity: {},
			value: 5,
			comment:'',
			platform:'',
			imgUrl:[],//模拟上传后从后台获得的图片和视频
			colors:'',
			stars: [
				{id: 1,types: true,img:'/static/component/star/stars.png'},
				{id: 2,types: true,img:'/static/component/star/stars.png'},
				{id: 3,types: true,img:'/static/component/star/stars.png'},
				{id: 4,types: true,img:'/static/component/star/stars.png'},
				{id: 5,types: true,img:'/static/component/star/stars.png'},
			],
			starNoImg:'/static/component/star/star-no.png',
			starImg:'/static/component/star/stars.png',
			starValue: 5
		};
	},
	created() {
		this.platform = uni.getSystemInfoSync().platform  //判断当前是安卓还是ios 然后进行适配
		this.newVideo = uni.createVideoContext('newVideo');
	},
	onLoad: function(option) {
		var naviData = JSON.parse(option.naviData);
		console.log(option)
		this.getActDetail(naviData.actId, naviData.actName, naviData.actImg)
	},
	methods: {
		//获取活动详情信息
		//由页面传值而来
		getActDetail(actId, actName, actImg) {
			let activity = {
				actId: actId,
				actName: actName,
				actImg: actImg
			}
			this.activity = activity
		},
		//获取活动详情信息 读取接口（未使用）
		//http://ronin.fun:8888/act/detail?actId={}
		getActivityDetail() {
			uni.request({
			    url: 'http://ronin.fun:8888/act/detail?actId=1',
			    success: (res) => {
					this.activity = res.data.data;
					console.log(res.data);
			    }
			});
		},
		//点击发表活动评论按钮
		clickPost() {
			uni.showLoading({
				title:"加载中..."
			})
			this.postActCmt(this.activity.actId, this.userId, this.value, this.comment, this.imgUrl)
		},
		//发表活动评论
		postActCmt(actId, userId, cmtScore, cmtCont, cmtImg) {
			uni.request({
				url: "http://ronin.fun:8888/act/cmt/post",
				method: 'POST',
				header: {
					'content-type': "application/x-www-form-urlencoded"
				},
				data: {
					actId: actId,
					userId: userId,
					cmtScore: cmtScore,
					cmtCont: cmtCont,
					cmtImg: cmtImg
				},
				success: (res) => {
					uni.hideLoading()
					//成功
					if (res.data.code === 200) {
						setTimeout(()=>{
							// 服务端响应的 message 提示
							uni.showToast({
								title: "发送成功",
								icon: "none",
								position: 'bottom',
							})
							//延时关闭  加载中的 loading框
							uni.hideLoading()
						},1000)
					} else { 
						//不成功
						uni.hideLoading()
						// 服务端响应的 message 提示
						setTimeout(()=>{
							uni.showToast({
								title: "发送失败",
								icon: "none",
								position: 'bottom',
							})
							//延时关闭  加载中的 loading框
							uni.hideLoading()
						},1000)
					}
					this.textMsg = ''
				},
				fail: (res) => {
					// 服务端响应的 message 提示
					setTimeout(()=>{
						uni.showToast({
							title: "发送失败",
							icon: "none",
							position: 'bottom',
						})
						//延时关闭  加载中的 loading框
						uni.hideLoading()
					},1000)
				}
			})
		},
		delImg(index) {
			//删除图片
			this.imgUrl.splice(index, 1);
		},
		 //上传图片
		chooseImages() {
			let that = this;
			uni.chooseImage({
				//该方法是调出选择图片的方法
				count: 9, //数量限制
				sizeType: ['original', 'compressed'], //可选 原图 或缩略图
				success: function(res) {
					console.log(res)
					var tempFilePaths = res.tempFilePaths;
					for (var i = 0; i < res.tempFiles.length; i++) {
						uni.uploadFile({
							url: "http://ronin.fun:8888/uploadpic",
							filePath: tempFilePaths[i],
							name: "pic",
							success: (uploadFileRes) => {
								var uploadImgObj = JSON.parse(uploadFileRes.data);
								that.imgUrl.push(uploadImgObj.data)
							}
						})
					}
				}
			});
		},
		setStar(item,index){ //设置评价星星
			let that = this
			if(item.types == false){
				for(var i = 0; i<=index;i++){
					console.log(that.stars[i].types)
					that.stars[i].types = true
					that.stars[i].img = that.starImg
				}
			}else{
				for(var i = index+1; i<that.stars.length;i++){
					console.log(that.stars[i].types)
					that.stars[i].types = false
					that.stars[i].img = that.starNoImg
				}
			}
			this.$forceUpdate() //强制刷新视图
			let value = this.stars.filter((e)=>{
				return e.types == true
			})
			this.starValue = value.length
		},
		previewImg(url){ //预览图片
			let arr = []
			arr[0] = url
			uni.previewImage({
				urls:arr
			})
		},
		submit(){ //提交时需要对存储图片和视频的数组进行操作 把视频和图片分离出来
		  let imgs = this.imgUrl.filter((e)=>{ //分离图片
			  return e.type == 1
		  })
		  let videos = this.imgUrl.filter((e)=>{
			  return e.type == 2
		  })
		 uni.showToast({
		 	title:'提交成功'
		 })
		 setTimeout(()=>{
		 	uni.navigateBack({
		 		delta:2
		 	})
		 },1500)
		},
		ondefault(){
			// 抛弃的方法
		}
	},
	onShow() {
		
	}
};
</script>

<style lang="scss" scoped>
@import "./actcmtpost.scss";
</style>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>

